<template>
	<view>
		<view class="shop-title">
			<view class="shop-item" v-for="(i,j) in shopList.data" :key="j" @click="changeTab(j)">
				<view :class="shopList.currentIndex==j?'active-color':''">
					{{i.name}}
				</view>
				<view class="shop-icon">
					<view class="iconfont icon-shangjiantou-copy up" :class="i.status==1?'active-color':''">
					</view>
					<view class="iconfont icon-xiajiantou-copy down" :class="i.status==2?'active-color':''">
					</view>
				</view>
			</view>
		</view>
		<LineBorder></LineBorder>

		<CarItem :lists="datas"></CarItem>
	</view>
</template>

<script>
	import LineBorder from '@/components/common/LineBorder.vue';
	import CarItem from '@/components/common/CarItem.vue';
	import http from "@/common/api/reqeust.js"
	export default {
		data() {
			return {
				shopList: {
					currentIndex: 0,
					data: [{
						name: "价格",
						key: 'price',
						status: 1 //1代表上 2代表下(有颜色)
					}, {
						name: "折扣",
						key: 'discount',
						status: 0
					}, {
						name: "品牌",
						key: 'price',
						status: 0
					}]
				},
				datas: []
			}
		},
		props: {
			searchValue: {
				type: String,
				default: ''
			},
		},
		components: {
			CarItem,
			LineBorder
		},
		computed: {
			orderBy() {
				// 获取当前点击对象
				let obj = this.shopList.data[this.shopList.currentIndex];
				let val = obj.status === 1 ? "desc" : "asc";
				console.log(obj);
				return {
					[obj.key]: val
				}
			}
		},
		mounted() {
			this.getData();
		},

		methods: {
			changeTab(index) {
				let idx = this.shopList.currentIndex;
				let item = this.shopList.data[idx];
				if (idx == index) {
					return item.status = item.status === 1 ? 2 : 1
				};
				let newItem = this.shopList.data[index]
				item.status = 0;
				this.shopList.currentIndex = index;
				newItem.status = 1
				this.getData();
			},
			getData() {
				http.request({
					url: "/api/goods/search",
					data: {
						name: this.searchValue,
						...this.orderBy
					}
				}).then((res) => {
					this.datas = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-title {
		display: flex;

		.shop-item {
			display: flex;
			height: 80rpx;
			justify-content: center;
			align-items: center;
			flex: 1;

			.iconfont {
				font-size: 12px;
			}
		}
	}
</style>